
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

    <body>

        <!--导航-->
        <nav class="ui inverted attached segment" th:fragment="menu(n)">
            <div class="ui container">
                <div class="ui inverted secondary stackable menu hp-padded-tb-mini">
                    <h2 class="ui teal header item">Blog</h2>
                    <a href="#" th:href="@{/}" class="nav-item item hp-mobile-hide" th:classappend="${n==1}?'active'"><i class="home icon"></i>首页</a>
                    <a href="#" th:href="@{/types/-1}" class="nav-item item hp-mobile-hide" th:classappend="${n==2}?'active'"><i class="idea icon"></i>分类</a>
                    <a href="#" th:href="@{/tags/-1}" class="nav-item item hp-mobile-hide" th:classappend="${n==3}?'active'"><i class="tags icon"></i>标签</a>
                    <a href="#" th:href="@{/archive}" class="nav-item item hp-mobile-hide" th:classappend="${n==4}?'active'"><i class="clone icon"></i>归档</a>
                    <a href="#" th:href="@{/aboutme}" class="nav-item item hp-mobile-hide" th:classappend="${n==5}?'active'"><i class="info icon"></i>关于我</a>
                    <div class="nav-item right item hp-mobile-hide">
                        <form action="#" name="search" th:action="@{/search}" method="post">
                            <div class="ui icon input transparent inverted">
                                <input type="text" name="query" th:value="${query}" placeholder="Search....">
                                <input type="hidden" name="page">
                                <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <a href="#" class="ui icon black button hp-nav-list-mobile hp-sidebar-hide" id="nav-sidebar">
                <i class="sidebar icon"></i>
            </a>
        </nav>

        <!--底部-->
        <footer class="ui inverted vertical segment hp-padded-tb-massive" th:fragment="footer">
            <div class="ui center aligned container">
                <div class="ui inverted divided stackable grid">
                    <div class="three wide column">
                        <div class="ui inverted link list">
                            <div class="item">
                                <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" class="ui rounded image" style="width: 110px" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header hp-text-thin hp-text-spaced">最新博客</h4>
                        <div id="newblog-container">
                            <div class="ui inverted link list" th:fragment="newBlogList">
                                <a th:each="blog:${newblogs}" th:text="${blog.title}" th:href="@{/blog/{id}(id=${blog.id})}" href="#" class="item">用户故事 （User Story）</a>
                                <!--/*-->
                                <a href="#" class="item">用户故事 （User Story）</a>
                                <a href="#" class="item">用户故事 （User Story）</a>
                                <!--*/-->
                            </div>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header hp-text-thin hp-text-spaced">联系我们</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Email:1402998477@qq.com</a>
                            <a href="#" class="item">QQ:1402998477</a>
                        </div>
                    </div>
                    <div class="seven wide column">
                        <h4 class="ui inverted header hp-text-thin hp-text-spaced">Mrbear</h4>
                        <p class="hp-text-thin hp-text-spaced hp-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的内容，希望可以给来到这儿的人有所帮助...</p>
                    </div>
                </div>
                <div class="ui inverted section divider"></div>
                <p class="hp-text-thin hp-text-spaced hp-opacity-mini">Copyright ©2019-2022 Mrbear Designed By Mrbear</p>
            </div>
        </footer>

    </body>

    <th:block th:fragment="script">
        <script src="http://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
        <!--代码高亮-->
        <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
        <!--目录生成-->
        <script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
        <!--二维码生成-->
        <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
        <!--平滑滚动-->
        <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
        <!--滚动检测-->
        <script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
        <script th:inline="javascript">
            $('#newblog-container').load(/*[[@{/footer/newblog}]]*/'/footer/newblog');
        </script>
    </th:block>
</html>
